<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lottie</title>
</head>
<style>
    #app {
        width: 600px;
        height: 600px;
        border: 1px solid #eee;
    }
</style>
<body>
    <!-- 
        在制作AE动画时，将图层命名为#svgId格式，前端加载该动画后，
        相应的图层的id会被设置为svgId，可以通过dom方法获取该元素
        并做相应的操作；

        在制作AE动画时，将图层命名为.svgClass格式，前端加载该动画后，
        相应的图层的class会被设置为svgClass，可以通过dom方法获
        取这些元素并做相应的操作；

        有些动画效果lottie-web暂不支持，有些则会影响json文件的大小。
        描边动效不支持，因为这个属性会导致lottie性能问题，所以后来
        lottie去掉了对该属性的支持。

        遵循下面的方案，会使json文件减小：
        尽量减少图层个数。每个图层都会导出成相应的json数据，图层减
        少能从很大程度上减小json大小。
        尽可能所有的图层都是在AE里面画出来的，而不是从其他软件引入的。
        如果是其他软件引入的，很可能导致描述这个图形的json部分变得很大。
     -->
    <div id="app"></div>
    <script src="lottie.min.js"></script>
    <script>
        const anim = lottie.loadAnimation({
            container: document.getElementById('app'),
            renderer: 'svg',
            loop: false,
            autoplay: false,
            path: 'blueball.json'
        });

        // 播放指定位置
        anim.addEventListener('DOMLoaded', function(){
            anim.playSegments([[0,5],[10,18]],true);
        });

        // anim.addEventListener('data_ready', () => {
        //     console.log('animation data has loaded');
        // });

        // * complete: 播放完成（循环播放下不会触发）
        // * loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
        // * enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
        // * segmentStart: 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
        // * data_ready: 动画json文件加载完毕触发
        // * DOMLoaded: 动画相关的dom已经被添加到html后触发
        // * destroy: 将在动画删除时触发

        // console.log(anim);

        // anim.goToAndStop(32, true);
        // anim.goToAndPlay(18, true);

        // - anim.playSegments（segments，forceFlag）
        // anim.playSegments([18, 30], false);

        // anim.play();
        // anim.setDirection(-1);
        // anim.setSpeed(2);

    
        // animation.play(); // 播放该动画，从目前停止的帧开始播放
        // animation.stop(); // 停止播放该动画，回到第0帧
        // animation.pause(); // 暂停该动画，在当前帧停止并保持

        // animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
        // animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
        // animation.goToAndStop(30, true); // 跳转到第30帧并停止
        // animation.goToAndPlay(300); // 跳转到第300毫秒并播放

        // animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段
        // animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧
        // animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

        // animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度
        // animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放
        // animation.destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法
    </script>
</body>
</html>